<template>
    <div class="user page">
        <cube-scroll>
            <div class="con">
                <div class="search" @click="showAlert">
                    <span class="iconfont iconxingtaiduICON_sousuo--"></span>
                    <span class="name">搜索</span>
                </div>
                <div class="vip">
                    <user-item @click.native="turn(topUser.id)" :user="topUser"></user-item>
                    <user-item @click.native="turn(user.id)" v-for="(user,index) in searchUsers" :key="user.id+'s'"
                               :user="user"></user-item>
                </div>

                <div class="users">
                    <div class="items" v-for="(key,index) in Object.keys(userList)" :key="index">
                        <div v-if="userList[key].length>0">
                            <span class="label">{{key}}</span>
                            <user-item @click.native="turn(user.id)" v-for="(user,index) in userList[key]" :key="index"
                                       :user="user"></user-item>
                        </div>
                    </div>
                </div>
            </div>
        </cube-scroll>
        <div class="letters">
            <span class="letter" :key="index" v-for="(letter,index) in Object.keys(userList)">{{letter}}</span>
        </div>
    </div>
</template>

<script>
    import userItem from '@/components/user-item'
    import {search, sTop} from "@/api/user";
    import {sendCard} from "../../api/course";
    import * as Dialog from '@/dialog'
    export default {
        activated() {
            //获取卡片ID
            this.cardId = this.$route.query.cardId
            sTop().then(res => {
                this.users = res.data
                this.topUser = res.extra.topUser
            })
        },
        data() {
            return {
                cardId: null,
                code: '',
                searchUsers: [],
                users: [],
                topUser: {}
            }
        },
        methods: {
            showSuccess() {
                Dialog.showCorrect('赠送成功').then(()=>{
                    this.$router.push({
                        path: '/card'
                    })
                })

            },
            turn(uid) {
                if (this.cardId) {
                    sendCard(uid, this.cardId).then(res => {
                        this.showSuccess();
                    })
                } else {
                    this.$router.push({
                        path: '/user/info',
                        query: {uid}
                    })
                }

            },
            showAlert() {
                this.dialog = this.$createDialog({
                    type: 'prompt',
                    title: '用户编号/手机号/名字',
                    prompt: {
                        value: '',
                        placeholder: '请输入'
                    },
                    onConfirm: (e, promptValue) => {
                        if (!promptValue || promptValue.trim() === "") {
                            return
                        }
                        search(promptValue).then(res => {
                            this.searchUsers = res.data
                            if (this.searchUsers.length <= 0) {
                                this.$createToast({
                                    type: 'warn',
                                    time: 1000,
                                    txt: '没有查到'
                                }).show()
                            }
                        })
                        // this.$createToast({
                        //     type: 'warn',
                        //     time: 1000,
                        //     txt: `Prompt value: ${promptValue || ''}`
                        // }).show()
                    }
                }).show()
            }
        },
        computed: {
            userList() {
                let letter = {
                    A: [],
                    B: [],
                    C: [],
                    D: [],
                    E: [],
                    F: [],
                    G: [],
                    H: [],
                    I: [],
                    J: [],
                    K: [],
                    L: [],
                    M: [],
                    N: [],
                    O: [],
                    P: [],
                    Q: [],
                    R: [],
                    S: [],
                    T: [],
                    U: [],
                    V: [],
                    W: [],
                    X: [],
                    Y: [],
                    Z: [],
                    '#': []
                }
                let pinyin = require("pinyin");
                let reg = /^[A-Za-z]+$/;
                this.users.forEach(user => {
                    if(user.name!=''&&user.name){
                        let p = pinyin(user.name)[0][0].charAt(0)
                        if (reg.test(p)) {

                            letter[p.toLocaleUpperCase()].push(user)

                        } else {
                            letter['#'].push(user)
                        }
                    }else {
                        letter['#'].push(user)
                    }



                })


                return letter
                // let pinyin = require("pinyin");
                // let pinData = this.users.map(user=>({
                //     user:user,
                //     pinyin:pinyin(user.name)[0][0]
                // }))
                // return  pinData.sort((a,b)=>{
                //     return a.pinyin.localeCompare(b.pinyin)
                // }).map(p=>p.user)

            }
        },
        name: "index",
        components: {
            userItem
        }
    }
</script>

<style scoped lang="stylus">
    .user
        background url("~@/assets/hbg.png") no-repeat  $page-bg
        background-size 100% auto
        z-index 1

        .con
            padding 10px 10px 0
            height 100%
            padding-bottom 44px
            .search
                background-color white
                height 30px
                display flex
                align-items center
                justify-content center
                color: rgba(161, 161, 161, 1);
                margin-bottom 10px
                border-radius 5px

                .iconxingtaiduICON_sousuo--
                    font-size 20px

                .name
                    font-size: 12px;
                    font-family: PingFang SC;
                    font-weight: 300;

        .users
            .label
                display inline-block
                height 30px
                text-align left
                font-size: 12px;
                font-family: PingFang SC;
                font-weight: 300;
                color: rgba(111, 111, 111, 1);
                line-height: 30px;

        .letters
            z-index 2
            display flex
            flex-direction column
            position fixed
            top 50%
            right 10px
            margin-top -50%

            .letter
                margin-top 7px
                font-size: 10px;
                font-family: PingFang SC;
                font-weight: 100;
                color: rgba(78, 61, 7, 1);


</style>